<template>
  <qf-card
    className="roleCreate"
    title="角色创建"
    btnTitle="返回"
    btnUrl="/role"
  >
    <qf-form :width="80" :formItem="formItem" :formBtns="formBtns"></qf-form>
  </qf-card>
</template>

<script>
import { postRoleApi } from "@/api/role";

export default {
  data() {
    return {
      // 表单配置
      formItem: [
        // ...
        {
          label: "角色名称",
          rules: [
            { required: true, message: "角色名称必须", trigger: "blur" },
            { min: 2, max: 6, message: "至少2~6个字符", trigger: "blur" },
          ],

          field: "role_name",

          placeholder: "请输入角色名称",
          type: "input",
        },
        {
          label: "角色描述",
          rules: [
            { required: true, message: "角色描述必须", trigger: "blur" },
            { min: 2, max: 12, message: "至少2~12个字符", trigger: "blur" },
          ],

          field: "role_describe",

          placeholder: "请输入角色描述",
          type: "input",
        },
        // ...
      ],
      // 表单按钮组
      formBtns: [
        {
          content: "创建",
          type: "primary",
          click: async (formData) => {
            console.log("表单数据", formData);
            const res = await postRoleApi(formData);
            if (res.meta.state === 201) {
              this.$message.success(res.meta.msg);
              this.jump("/role");
            } else {
              this.$message.error(res.meta.msg);
            }
          },
        },
        {
          content: "重置",
          type: "",
        },
      ],
    };
  },
};
</script>

<style></style>
